<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			[v-cloak] {
				display: none;
			}
		</style>
	</head>

	<body>
		<section class="todoapp">
			<header class="header">
				<h1>todos</h1>
				<!--输入框What needs to be done-->
				<input class="new-todo" autofocus autocomplete="off" placeholder="需要做什么?" v-model="newTodo" @keyup.enter="addTodo">
			</header>
			<!--添加的列表-->
			<section class="main" v-show="todos.length" v-cloak>
				<input class="toggle-all" type="checkbox" v-model="allDone">
				<ul class="todo-list">
					<li v-for="todo in filteredTodos" class="todo" :key="todo.id" :class="{ completed: todo.completed, editing: todo == editedTodo }">
						<div class="view">
							<input class="toggle" type="checkbox" v-model="todo.completed">
							<label @dblclick="editTodo(todo)">{{ todo.title }}</label>
							<!--删除键-->
							<button class="destroy" @click="removeTodo(todo)"></button>
						</div>
						<!--修改框-->
						<input class="edit" type="text" v-model="todo.title" v-todo-focus="todo == editedTodo" @blur="doneEdit(todo)" @keyup.enter="doneEdit(todo)" @keyup.esc="cancelEdit(todo)">
					</li>
				</ul>
			</section>
			<footer class="footer" v-show="todos.length" v-cloak>
				<span class="todo-count">
			      <strong>{{ remaining }}</strong> {{ remaining | pluralize }} left
			    </span>
				<ul class="filters">
					<li>
						<a href="#/all" :class="{ selected: visibility == 'all' }">All</a>
					</li>
					<li>
						<a href="#/active" :class="{ selected: visibility == 'active' }">Active</a>
					</li>
					<li>
						<a href="#/completed" :class="{ selected: visibility == 'completed' }">Completed</a>
					</li>
				</ul>
				<button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
			      Clear completed
			    </button>
			</footer>
		</section>
		<!--<footer class="info">
			<p>Double-click to edit a todo</p>
			<p>Written by
				<a href="http://evanyou.me">Evan You</a>
			</p>
			<p>Part of
				<a href="http://todomvc.com">TodoMVC</a>
			</p>
		</footer>-->
		<script src="../lib/vue.js" type="text/javascript" charset="utf-8"></script>
		<script>
			var STORAGE_KEY = 'todos-vuejs-2.0'
			//本地储存
			var todoStorage = {
				fetch: function() {
					var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
					todos.forEach(function(todo, index) {
						todo.id = index
					})
					todoStorage.uid = todos.length
					return todos
				},
				save: function(todos) {
					localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
				}
			}

			var filters = {
				all: function(todos) {
					return todos
				},
				active: function(todos) {
					return todos.filter(function(todo) {
						return !todo.completed
					})
				},
				completed: function(todos) {
					return todos.filter(function(todo) {
						return todo.completed
					})
				}
			}

		
			var app = new Vue({
				// app initial state
				data: {
					todos: todoStorage.fetch(),//任务数组
					newTodo: '',//添加内容
					editedTodo: null,
					visibility: 'all'
				},

				// watch todos change for localStorage persistence
				watch: {
					todos: {
						handler: function(todos) {
							todoStorage.save(todos)
						},
						deep: true
					}
				},

				// computed properties
				// http://vuejs.org/guide/computed.html
				computed: {
					//用于显示列表数据  筛选
					filteredTodos: function() {
						return filters[this.visibility](this.todos)
					},
					remaining: function() {
						return filters.active(this.todos).length
					},
					allDone: {
						get: function() {
							return this.remaining === 0
						},
						set: function(value) {
							this.todos.forEach(function(todo) {
								todo.completed = value
							})
						}
					}
				},

				filters: {
					pluralize: function(n) {
						return n === 1 ? 'item' : 'items'
					}
				},

				// methods that implement data logic.
				// note there's no DOM manipulation here at all.
				methods: {
					//确认添加
					addTodo: function() {
						console.log('确认添加')
						var value = this.newTodo && this.newTodo.trim()
						if(!value) {
							return
						}
						this.todos.push({
							id: todoStorage.uid++,
							title: value,
							completed: false
						})
						this.newTodo = ''
					},
					//删除
					removeTodo: function(todo) {
						this.todos.splice(this.todos.indexOf(todo), 1)
					},
					//双击列表
					editTodo: function(todo) {
						this.beforeEditCache = todo.title
						this.editedTodo = todo
					},

					doneEdit: function(todo) {
						if(!this.editedTodo) {
							return
						}
						this.editedTodo = null
						todo.title = todo.title.trim()
						if(!todo.title) {
							this.removeTodo(todo)
						}
					},

					cancelEdit: function(todo) {
						this.editedTodo = null
						todo.title = this.beforeEditCache
					},

					removeCompleted: function() {
						this.todos = filters.active(this.todos)
					}
				},

				// a custom directive to wait for the DOM to be updated
				// before focusing on the input field.
				// http://vuejs.org/guide/custom-directive.html
				directives: {
					'todo-focus': function(el, value) {
						if(value) {
							el.focus()
						}
					}
				}
			})

			// handle routing
			function onHashChange() {
				var visibility = window.location.hash.replace(/#\/?/, '')
				if(filters[visibility]) {
					app.visibility = visibility
				} else {
					window.location.hash = ''
					app.visibility = 'all'
				}
			}

			window.addEventListener('hashchange', onHashChange)
			onHashChange()

			// mount
			app.$mount('.todoapp')
		</script>
	</body>

</html>